﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>

    <!-- Include jquery -->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    <!-- Include jQuery Popup Overlay -->
    <script src="Scripts/jquery.popupoverlay.js"></script>
    <style>
        /* Add these styles once per website */
        .popup_background {
            z-index: 2000; /* any number */
        }

        .popup_wrapper {
            z-index: 2001; /* any number + 1 */
        }
        /* Add inline-block support for IE7 */
        .popup_align,
        .popup_content {
            *display: inline;
            *zoom: 1;
        }
        .divpoup {
            display: inline-block;
    margin: 1em;
    position: relative;
    text-align: left;
    vertical-align: middle;
        }
        .well {
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 19px;
}
    </style>
</head>
<body>
    <!-- Add a button which will open the modal -->
    <button class="my_modal_open">Open modal</button>

    <!-- Add content to modal -->
    <div id="my_modal">
        <div style="display: inline-block; margin: 1em; text-align: left; position: relative; vertical-align: middle;" class="well popup_content" id="Div1" data-popup-initialized="true" tabindex="-1">
            <a style="float: right; padding: 0 0.4em;" class="my_modal_close" href="#">×</a>
            <h4>Modal overlay example</h4>
            <p>Try to change the width and height of browser window, or to rotate your tablet device, and also try to navigate with <kbd>Tab</kbd> key.</p>
            <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p>
            <p>If you don't want to show the outline around the container when focused, you can remove it with <code>.overlay {outline: none}.</code></p>
            <form>
                <button class="btn btn-alert my_modal_close">Close</button>
            </form>
        </div>
    </div>

    <!-- Add javascript to make it work -->
    <script>
        $(function () {
            $('#my_modal').popup();
        });
    </script>


</body>
</html>
